<!-- 代码测试 -->
<template>
  <div class="test-code-page">
    <TextHtml v-model="htmlCode"
              editable />

  </div>
</template>

<script>

let htmlBody = `<div style="color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;"><div><span style="color: #d4d4d4;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #6a9955;">/**&nbsp;可编辑模式&nbsp;*/</span></div><div><span style="color: #d4d4d4;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #9cdcfe;">editable:</span><span style="color: #d4d4d4;">&nbsp;{</span></div><div><span style="color: #d4d4d4;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #9cdcfe;">type:</span><span style="color: #d4d4d4;">&nbsp;</span><span style="color: #4ec9b0;">Boolean</span><span style="color: #d4d4d4;">,</span></div><div><span style="color: #d4d4d4;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #9cdcfe;">default:</span><span style="color: #d4d4d4;">&nbsp;</span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">,</span></div><div><span style="color: #d4d4d4;">&nbsp;&nbsp;&nbsp;&nbsp;},</span></div></div>`

export default {
  components: {},
  props: {},
  // data () {
  //  return {};
  // },
  // computed: {},
  // mounted: {},
  // methods: {},
  setup (props, { emit, attrs }) {
    const { ref } = window.$plus.vue;
    const htmlCode = ref(htmlBody);
    return {
      htmlCode,
    };
  }
}

</script>
<style lang='less'>
.test-code-page {
  height: 100%;
  position: relative;

  .qv-input-html {
    margin: 1rem;
  }
  // .qv-code-run {
  //   .code-pre {
  //     color: #f5f5f5;
  //     height: 10rem;
  //     background-color: rgb(40, 44, 52);
  //     font-size: 0.8rem;
  //     position: relative;

  //     //
  //   }
  // }
  // .qv-poptip {
  //   color: chocolate;
  //   text-align: center;
  // }
}
</style>